<template>
	<el-card>
		<el-form :inline="true">
			<el-form-item>
				<el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
			</el-form-item>
		</el-form>
		<el-table ref="TableRef" v-loading="state.dataListLoading" :data="state.dataList" border highlight-current-row
			@current-change="handleCurrentChange" height=300>
			<el-table-column prop="key" label="名称" />
			<el-table-column prop="value" label="代码" />
			<el-table-column fixed="right" label="操作">
				<template #default="scope">
					<el-button type="danger" @click="addOrUpdateHandle(scope.row.key,scope.row.value)" round>编辑
					</el-button>
					<el-button type="danger" @click="deleteBatchHandle(scope.row.key)" round>删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>
	</el-card>

	<el-card>
		<div id="echarts" v-loading="loading"></div>
	</el-card>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted, reactive, ref } from "vue";
import { getFund } from '@/api/fund/index';
import { IHooksOptions } from "@/hooks/interface";
import { useCrud } from "@/hooks";
import { ElTable } from "element-plus";
import AddOrUpdate from './add-or-update.vue';

const loading=ref(false);

//定义echarts图表
const myCharts = ref<any>();

//定义echarts图表的配置项
const option = {
	xAxis: {
		type: 'category'
	},
	yAxis: {
		title: '单位净值',
		type: 'value',
		min: 'dataMin'
	},
	tooltip: {
		// trigger: 'axis'
		trigger: 'item'
	},
	color: {
		type: 'linear',
		x: 0,
		y: 0,
		x2: 1,
		y2: 1,
		colorStops: [{
			offset: 0, color: 'blue' // 0% 处的颜色
		}, {
			offset: 1, color: 'yellow' // 100% 处的颜色
		}],
		global: false // 缺省为 false
	},
	series: [
		{
			name: '单位净值',
			type: 'line',
			smooth: true,
			symbolSize: 8,
			// lineStyle: {
			// 	color: 'red'
			// },
			// itemStyle: {
			// 	// 设置线条上点的颜色（和图例的颜色）
			// 	color: 'red',
			// 	borderWidth: '10'
			// },
			markPoint: {
				symbol: 'pin',
				symbolOffset: [0, -5],
				label: {
					formatter: (res: any) => {
						return Math.trunc(res.value * 100) / 100;
					}
				},
				data: [
					{
						type: 'max', name: 'Max', itemStyle: {
							color: '#FF0000'
						}
					}, {
						type: 'min', name: 'Min', itemStyle: {
							color: '#FF0000'
						}
					}
					// { type: 'min', name: 'Min' }
				]
			},
			markLine: {
				symbolSize: 15,
				lineStyle: {
					width: 3,
					cap: 'round'
					// type:'solid'
				},
				data: [{
					type: 'average', name: 'Avg', itemStyle: {
						// color: '#00FF00'
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 1,
							y2: 1,
							colorStops: [{
								offset: 0, color: 'blue' // 0% 处的颜色
							}, {
								offset: 1, color: 'gray' // 100% 处的颜色
							}],
							global: false // 缺省为 false
						},
					}
				}]
			},
			// data: [1.89, 1.91, 1.94, 1.85, 1.88, 1.92, 1.97],
			data: [["", ""]]
		}
	]
};

onMounted(() => {
	myCharts.value = echarts.init(document.getElementById("echarts")!);

	flushCharts([[]]);

	window.addEventListener('resize', () => {
		if (myCharts) {
			myCharts.value.resize()
		}
	})
})

//刷新echats图表
const flushCharts = (data: string[][]) => {
	option.series[0].data = data;
	// 使用刚指定的配置项和数据显示图表。
	myCharts.value.setOption(option);
}

//Table表格的配置
const state: IHooksOptions = reactive({
	dataListUrl: '/Fund',
	deleteUrl: '/Fund',
	isPage: false,
	queryForm: {
		code: '',
		key: ''
	}
})
//封装好的Crud方法
const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle } = useCrud(state)

interface Fund {
	key: string
	value: string
}

const currentRow = ref()

const singleTableRef = ref<InstanceType<typeof ElTable>>()

//选中项变化时触发
const handleCurrentChange = (field: Fund | undefined) => {
	if (field == undefined) {
		flushCharts([[]])
		return
	}

	loading.value=true
	currentRow.value = field
	getFund(field?.value).then(res => {
		flushCharts(res.data);
		loading.value=false
	})
}

const addOrUpdateRef = ref()
const addOrUpdateHandle = (field?: string, code?: string) => {
	addOrUpdateRef.value.init(field, code)
}
</script>

<style lang="scss" scoped>
#echarts {
	width: 100%;
	height: 400px;
}
</style>